<template>
  <div id="CalendarCell" class="calendar-cell">
    <el-button @click="test(row[`${item.key}`])" v-if="row[`${item.key}`].name" :class="{
      xiecheng: row[`${item.key}`].from === '携程',
      meituan: row[`${item.key}`].from === '美团',
      'table-cell': true,
    }" style="border-left: 5px solid #4e8eff">
      <div style="text-align: left; color: black">
        {{ row[`${item.key}`].name }}
      </div>
      <li style="text-align: left; color: black">
        {{ row[`${item.key}`].from }}
      </li>
      <div class="pay" v-if="!row[`${item.key}`].isPay">
        <span>欠</span>
      </div>
    </el-button>
    <div class="MenuPopover" v-else>
      <el-popover style="display: flex;" :class="row[`${item.key}`].isSelect ? 'isSelect' : ''" placement="right"
        :teleported="false" z-index=1800 width="56" min-width="0" v-model="row[`${item.key}`].visible" trigger="manual">
        <!-- 今天之前的房型 -->
        <div class="popover_menus" v-show="item.timestamp < todayStamp">
          <span @click="repairRoom(row[`${item.key}`], row)">补录</span>
          <span @click="closeRoom(item)">关房</span>
          <span>取消</span>
        </div>
        <!-- 今天的房型点击 -->
        <div class="popover_menus" v-show="item.timestamp == todayStamp">
          <span @click="repairRoom(row[`${item.key}`], row)">预订</span>
          <span @click="openRoom">入住</span>
          <span @click="closeRoom">关房</span>
          <span>取消</span>
        </div>
        <!--今日之后的点击 -->
        <div class="popover_menus" v-show="item.timestamp > todayStamp">
          <span @click="repairRoom(row[`${item.key}`], row)">预订</span>
          <span @click="closeRoom">关房</span>
          <span>取消</span>
        </div>
        <div slot="reference" type="text" :class="[
          'room-price',
          row[`${item.key}`].isSelect != true ? ' .el-button' : ' .el-button_isSelect',
        ]" @click="sumbit_date(row, index)">
          ${{ row[`${item.key}`].sales_price }}
        </div>
      </el-popover>
    </div>
    
    <div>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    row: Object,
    item: Object,
    index: Number,
    SumbitData: Array,
    tableData: Array,
    options: Array,
    roomType: Array,
  },
  data() {
    return {
      // 订单提醒
      orderTipShow: false,
      dialogVisible: false,
      visible: false,
      direction: "rtl",
      value1: "",
      name: "",
      todayStamp: '',
      CascaderTableData: [],
      cascader: "",
      level_one: [],
      courseArr: [],
      num: 1,
      Calendar: false,
      phone: "",
      value: "",
      channelColor: "#409EFF",
      activeName: "first",
      orderData: null,
      old: [],
      cities: [
        {
          color: "width:12px;height:12px;display: inline-block;background-color:#4e8eff;",
          label: "自来客",
          value: "zilaike",
        },
        {
          color: "width:12px;height:12px;display: inline-block;background-color:#fd8137",
          label: "途家",
          value: "tujia",
        },
        {
          color: "width:12px;height:12px;display: inline-block;background-color:#a69340",
          label: "美团民宿",
          value: "meituan",
        },
        {
          color: "width:12px;height:12px;display: inline-block;background-color:#f40a0b",
          label: "飞猪",
          value: "flypig",
        },
        {
          color: "width:12px;height:12px;display: inline-block;background-color:#21ca6f",
          label: "小程序",
          value: "app",
        },
      ],
      color: "width:12px;height:12px;display: inline-block;background-color:#df4c76",
      curData: "去哪儿",

      val: "",

    };
  },
  computed: {

  },
  methods: {
    getTodayStamp() {
      const dateStamp = new Date(new Date().toLocaleDateString()).getTime();
      this.todayStamp = dateStamp / 1000;
    },
    test(data) {
      console.log(data, "子组件");
    },
    getTableData() {

      this.CascaderTableData = this.tableData;
      let arr = [];
      this.CascaderTableData.forEach((item) => {
        arr.push(item.title);
      });
      for (let i = 0; i < arr.length; i++) {
        if (this.level_one.indexOf(arr[i]) === -1) {
          this.level_one.push(arr[i]);
          this.$message({
            message: "添加成功",
            type: "success",
          });
        } else {
          this.$message({
            message: "不能重复添加数据",
            type: "warning",
          });
        }
      }
      console.log(this.level_one);
    },
    handleChange(value) {
      console.log(value);
    },
    showCalendar() {
      if (this.Calendar == false) {
        this.Calendar = true;
      } else {
        this.Calendar = false;
      }
    },

    dropDownClick(e) {
      this.$refs.child.clickItem();
      console.log(e);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    repairRoom(item, row) {
      // console.log(item, row);
      this.$emit("openOrderPoup", item, row.room_num);
    },
    openRoom() {
      console.log("开房");
    },
    closeRoom() {
      this.$emit('closeRoom', true)
      console.log("关房-子组件");
    },
    sumbit_date(row, index) {
      let key = "key" + index;

      // this.pitch_on.push(pitch_on)
      // console.log(this.pitch_on);
      // console.log(row.room_num, row[key]);
      // console.log(row[key].visible);
      // 记录上一次点击的key
      // console.log(row[key]);
      if (row[key].isSelect == false) {
        this.tableData.forEach(item => {
          for (let key2 in item) {
            if (item[key2].isSelect == true) {
              item[key2].visible = false
            }
          }
        })
        this.old.push(
          {
            key: key,
            num: row.room_num
          }
        )
        row[key].visible = true
        row[key].isSelect = true
        // console.log(this.tableData);
      } else {
        // console.log(this.old);
        // console.log(this.tableData, "取消");
        row[key].visible = false
        row[key].isSelect = false
      }
      // if (row[key].isSelect == false) {
      //   console.log("3333");

      //   // this.tooltip = true;
      //   row[key].isSelect = true;
      // } else if (row[key].isSelect == true) {
      //   console.log("44r44");

      //   row[key].isSelect = false;
      // }
      // console.log(row);
      let data = {
        title: row.title,
        room_num: row.room_num,
        roomDate: row[key],
      };
      let pitch_on = {
        room_num: row.room_num,
        time: row[key].date,
        price: row[key].sales_price,
        title: row.title,
        isSelect: row[key].isSelect,
        dateStamp: row[key].dateStamp
      }
      // console.log(data);
      // console.log(data.index, index, this.old);
      // console.log('子组件', pitch_on);
      this.$emit("SumbitDate", data, index, this.old, pitch_on);
      this.$emit("pitchOn", pitch_on)
      // console.log(pitch_on, "=1231231====");
      // console.log(index);
    },
  },
  created() {
    this.getTodayStamp()
  }
};
</script>

<style lang="scss" scoped>
// 欠款
::v-deep {
  .el-button {
    border-radius: 0px;
  }

  .el-input__prefix {
    display: flex;
    align-items: center;
  }

  .el-popover {
    padding: 5px !important;
  }

  .el-table td.el-table__cell div {
    user-select: none !important;
  }

  .el-drawer__header {
    padding-top: 0px;
  }

  .el-drawer__body {
    padding-left: 0 !important;
  }

  .el-tabs__content {
    padding: 20px 0;
  }

  .el-input__inner {
    border-radius: 0;
  }

  .el-form-item {
    margin-bottom: 5px;
  }

  .el-tabs__item {
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    font-weight: 500;
  }

  .el-tabs__active-bar {
    height: 4px;
  }

  .el-drawer__close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
  }
}

.price-icon {
  font-size: 12px;
}

.total-price {
  position: sticky;
  bottom: 0;
  right: 0;
  height: 60px;
  width: 100%;
  margin-top: 20px;
  border: 1px solid #e9eaed;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;

  .price-title,
  .price-total {
    font-size: 16px;
    font-weight: 700;
  }

  .price-total {
    color: #409eff;
  }
}

.flex-benw {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  &>div:not(:first-child) {
    margin: 0 1.5px;
  }
}

.custom-select--div {
  width: 15px;
  height: 15px;
  margin-left: 2px;
  margin-top: -3px;
}

.custom-select {
  display: flex;
  align-items: center;

  &>div:first-child {
    width: 17px;
    height: 17px;
    margin-right: 10px;
  }
}

.room-item {
  margin-bottom: 15px;
}

.drawer-tabs {
  width: 100%;
  overflow: hidden;
  padding: 0 20px;
  color: #333333;
  margin-top: 0px;

  .title:not(:first-child) {
    border-top: 1px dashed #e0e0e0;
    padding: 20px 0px 10px 0;
    margin-top: 20px;
  }

  .title {
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 10px;
    color: #000000;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    &>span:last-child {
      font-size: 14px;
      color: #333333;
    }
  }

  .people {
    margin: 0 15px 0 5px !important;
    position: relative;

    span {
      position: absolute;
      top: -5.5px;
      right: -5.5px;
      height: 15px;
      width: 15px;
      text-align: center;
      border-radius: 50%;
      line-height: 15px;
      font-size: 10px;
      background-color: #409eff;
      color: #fff;
    }
  }

  .remark {
    margin: 0 5px;
    color: #409eff;
  }

  .delete-icon {
    cursor: pointer;
    font-size: 20px;

    &:hover {
      color: #409eff;
    }
  }

  .remind {
    &-item {
      border-radius: 10px;
      color: #999999;
      font-size: 14px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;

      .detail {
        background-color: #f2f3f6;
        flex: 1;
        padding: 6px 10px;
        border-radius: 5px;

        span:first-child {
          margin-right: 15px;
        }
      }

      .operate {
        width: 80px;
        background-color: #fff;

        i {
          margin: 0 10px;
          font-size: 20px;
          cursor: pointer;
        }
      }
    }
  }
}

.custom-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 550px;
  background-color: #fff;
  z-index: 9999;
  box-shadow: 20px 1px 16px 0px #dcdfe6, 20px 0px 20px 0px #dcdfe6;
}

.popover_menus {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  text-align: center;
  user-select: none;

  span {
    padding: 5px 0;
    cursor: pointer;
    border-radius: 5px;

    &:hover {
      background-color: #b3c8ff;
      color: #fff;
      font-weight: bold;
    }
  }
}

.room-price {
  text-align: center;
  width: 100%;
  height: 52px;
  line-height: 52px;

  &:hover {
    background-color: #b3c8ff;
    color: #fff;
    cursor: pointer;
  }
}

.calendar-cell {
  padding: 3px;
  height: 60px;

  .table-cell {
    padding: 0 5px;
  }
}

.pay {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 18px;
  width: 18px;
  line-height: 18px;
  text-align: center;
  color: white;
  border-radius: 2px;
  background-color: #f56c6c;

  &>span {
    font-size: 10px;
  }
}

// 美团
.meituan {
  width: 100%;
  height: 100%;
  background-color: #ffd4b3;
}

// 携程
.xiecheng {
  width: 100%;
  height: 100%;
  background-color: #c2ebff;
}

// 订单信息

.title {
  margin-top: 5px;
  margin-bottom: 5px;
}

.order_info {
  margin-top: 10px;
  display: flex;

  .name {
    display: inline-block;
    margin-right: 20px;

    .el-input {
      margin-left: 20px;
      width: 125px;
    }
  }

  .phone {
    display: inline-block;
    margin-right: 20px;

    .el-input {
      width: 125px;
      margin-left: 20px;
    }
  }
}

.channel {
  margin-top: 30px;
  display: flex;

  .el-select {
    margin-left: 20px;
  }

  .color {
    width: 12px;
    height: 12px;
    display: inline-block;
  }

  .channelColor {
    width: 12px;
    height: 12px;
    background-color: #0486fe;
  }
}

// 啥状态都没得时候点击后样式
.isSelect {
  .el-button {
    color: #ebebeb00;
  }

  .el-button_isSelect {
    color: black;
  }

  background-color: #b3c8ff;
  color: #ebebeb00;
  background-image: url("../../../../assets/photo/isSelect.png");
  background-repeat: no-repeat;
  background-position: center center;
}

::v-deep {
  .room_info {
    .el-button--text {
      padding: 0px;
    }

    // overflow: hidden;
    float: left;

    .vue-dropdown {
      border: 0px !important;
      line-height: 0px !important;

      .cur-name[data-v-f0ae7f7a] {
        padding: 0px !important;
        line-height: 0 px !important;

        .cur-name::after {
          top: 9px !important;
        }
      }

      z-index: 5;
      border: 0px !important;
    }

    display: -webkit-inline-box;

    .num {
      padding: 0 10px;

      border-right: 0.5px solid #dcdfe6;
    }

    .roomType {
      padding: 0 10px;

      border-right: 0.5px solid #dcdfe6;
    }

    .date {
      padding-right: 10px;

      border-right: 0.5px solid #dcdfe6;
    }

    padding: 2px 4px;
    font-size: 12px;
    // width: 290px;
    // height: 26px;
    // border: 0.5px solid #dcdfe6;
    border-radius: 2px;
  }

  .el-drawer__body {
    padding-left: 20px;

    .el-drawer__wrapper {
      width: 550px !important;
      left: auto !important;

      .el-drawer.rtl {
        width: 100% !important;
      }
    }
  }

  .checkIn_name {
    line-height: 44px;

    .el-button {
      padding: 0px !important;
    }

    display: inline-block;
    margin-left: 20px;
  }

  .addRoom_info {
    margin-top: 20px;
    width: 93px;
    height: 23px;

    .el-button {
      padding: 0px !important;
      width: 93px;
      height: 23px;
      line-height: 23px;
      float: left;
    }
  }

  .el-drawer__header {
    margin-bottom: 0px !important;
  }
}
</style>
